<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<div class="col-md-12">
	<div class="panel-search">
		<form class="form-inline" action="/detailList/putList">
			<div class="form-group">
				<label class="control-label">请选择仓库：</label> <select
					name="warehouseId" class="form-control" style="width: 59%;">
					<option value="0">全部</option>
					<c:forEach items="${warehouse}" var="warehouse" varStatus="vs">
						<option value="${warehouse.id}">${warehouse.name}</option>
					</c:forEach>
				</select>
			</div>
			<br>
			<div class="form-group">
				<label class="control-label">产品名称：</label> <input name="productName"
					type="text" placeholder="产品名称" class="form-control"
					style="width: 200px;">
			</div>
			<br>
			<div class="form-group">
				<label class="control-label" style="color: black; float: left;">时间:</label>
				<div class="date-pickerr"
					style="float: left; padding-left: 2px; margin-right: -30px;">
					<div class="input-icon right" style="width: 43%; float: left;">
						<i class="fa"></i>
						<div class="input-group date date-picker"
							data-date-format="yyyy-mm-dd">
							<input type="text" class="form-control" name="beginTime" readonly
								required maxlength="11" style="cursor: pointer;" /> <span
								class="input-group-btn">
								<button class="btn default" type="button">
									<i class="fa fa-calendar"></i>
								</button>
							</span>
						</div>
					</div>
					<div class="input-icon right"
						style="width: 5%; float: left; text-align: center; padding-top: 6px;">
						<span style="font-size: 14px;">至</span>
					</div>
					<div class="input-icon right" style="width: 43%; float: left;">
						<i class="fa"></i>
						<div class="input-group date date-picker"
							data-date-format="yyyy-mm-dd">
							<input type="text" class="form-control" name="endTime" readonly
								required maxlength="11" style="cursor: pointer;" /> <span
								class="input-group-btn">
								<button class="btn default" type="button">
									<i class="fa fa-calendar"></i>
								</button>
							</span>
						</div>
					</div>
				</div>
				<button type="button" class="btn btn-primary"
					onclick="searchDetailList();">
					<i class="fa fa-search"></i>
					<spring:message code="btn.search"></spring:message>
				</button>
			</div>
		</form>
	</div>
	<div class="btn-div">
		<div class="div-left"></div>
		<div class="div-right">
			<button type="button" class="btn btn-success"
				onclick="showExportWindow()">
				<i class="fa fa-mail-forward"></i>批量导出
			</button>
			<button type="button" class="btn btn-warning"
				onclick="batchDelete('/detailList/delete')">
				<i class="fa fa-trash-o"></i> 批量删除
			</button>

		</div>
	</div>
</div>
<div class="table-scrollable">
	<div style="margin-top: 20px;"></div>
	<div class="panel-content">
		<div class="tabbable" id="tabs-617900">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#panel-236167" data-toggle="tab"
					onclick="changeFromAction('putList')">入库</a></li>
				<li><a href="#panel-251835" data-toggle="tab"
					onclick="changeFromAction('outList')">出库</a></li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active" id="panel-236167"></div>
				<div class="tab-pane" id="panel-251835"></div>
			</div>
		</div>
	</div>
</div>
<!-- 隐藏的导出窗口 -->
<div class="modal fade" id="exportWindow" tabindex="-1" role="basic"
	aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true"></button>
				<h4 class="modal-title" style="color: black;">请选择导出选项</h4>
			</div>
			<form id="exportPutForm" class="form-horizontal form-bordered"
				action="${webRoot }/detailList/batchExport" method="post">
				<div class="modal-body">
					<!-- 选择仓库 -->
					<div class="form-group ">
						<label class="col-md-3 control-label" style="color: black;">导出仓库:</label>
						<div class="col-md-4" style="width: 50%">
							<div class="input-icon right">
								<i class="fa"></i><select name="warehouseId"
									class="form-control" id="put_warehouse">
									<c:forEach items="${warehouse}" var="warehouse" varStatus="vs">
										<option value="${warehouse.id}">${warehouse.name}</option>
									</c:forEach>
								</select>
							</div>
						</div>
					</div>
					<!-- 选择导出类别 -->
					<div class="form-group">
						<label class="col-md-3 control-label" style="color: black;">类别:</label>
						<div class="col-md-4" style="width: 50%">
							<div class="input-icon right">
								<i class="fa"></i><select name="typeId" class="form-control">
									<option value="0">全部</option>
									<option value="1">入库</option>
									<option value="2">出库</option>
								</select>
							</div>
						</div>
					</div>
					<!-- 选择导出时间 -->
					<div class="form-group">
						<label class="col-md-3 control-label" style="color: black;">时间:</label>
						<div class="col-md-9">
							<div class="date-pickerr">
								<div class="input-icon right" style="width: 45%; float: left;">
									<i class="fa"></i>
									<div class="input-group date date-picker"
										data-date-format="yyyy-mm-dd">
										<input type="text" class="form-control" name="beginTime"
											readonly required maxlength="11" style="cursor: pointer;" />
										<span class="input-group-btn">
											<button class="btn default" type="button">
												<i class="fa fa-calendar"></i>
											</button>
										</span>
									</div>
								</div>
								<div class="input-icon right"
									style="width: 10%; float: left; text-align: center; padding-top: 6px;">
									<span style="font-size: 14px;">至</span>
								</div>
								<div class="input-icon right" style="width: 45%; float: left;">
									<i class="fa"></i>
									<div class="input-group date date-picker"
										data-date-format="yyyy-mm-dd">
										<input type="text" class="form-control" name="endTime"
											readonly required maxlength="11" style="cursor: pointer;" />
										<span class="input-group-btn">
											<button class="btn default" type="button">
												<i class="fa fa-calendar"></i>
											</button>
										</span>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="modal-footer">
					<button class="btn blue" onclick="exportDatas();">确定</button>
					<button id="recordgb" type="button" class="btn default"
						data-dismiss="modal">关闭</button>
				</div>
			</form>
		</div>
	</div>
</div>

<script type="text/javascript"
	src="<c:url value="/static/custom/datepicker-util.js"></c:url>"></script>
<script type="text/javascript">
	$(function() {
		searchDetailList();
	});
	function changeFromAction(data) {
		console.log(data);
		$('.panel-search form').attr('action', '/detailList/' + data);
	}

	/** 查询明细 */
	function searchDetailList() {
		var searchWarehouseId = $("select[name=warehouseId]").find(
				"option:selected").val();
		var searchProductName = $("input[name=productName]").val();
		var beginTime = $("input[name=beginTime]").val();
		var endTime = $("input[name=endTime]").val();
		var dataParam = {
			'warehouseId' : searchWarehouseId,
			'productName' : searchProductName,
			'beginTime' : beginTime,
			'endTime' : endTime
		}
		console.log("dataParam: " + dataParam);
		$.ajax({
			type : 'post',
			url : webRoot + '/detailList/putList',
			data : dataParam,
			success : function(data) {
				$("#panel-236167").html(data);
			}
		});
		$.ajax({
			type : 'post',
			url : webRoot + '/detailList/outList',
			data : dataParam,
			success : function(data) {
				$("#panel-251835").html(data);
			}
		});
	}
</script>